<template>
  <el-dialog v-model="dialogVisible" :title="menuTitle" width="800" destroy-on-close>
    <!-- 输入框 -->
    <el-form class="form-hight" ref="ruleFormRef" :model="addMenuItem" :rules="rules" label-width="auto">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="菜单名称:" prop="title">
            <el-input v-model="addMenuItem.title" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="类型">
            <el-select v-model="addMenuItem.type">
              <el-option label="菜单" value="menu"></el-option>
              <el-option label="按钮" value="button"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="创建者:" prop="creator">
            <el-input v-model="creator.creator" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="父级菜单">
            <el-cascader style="width: 600px" v-model="addMenuItem!.pid" :options="allUserMan" :props="{
              expandTrigger: 'hover',
              checkStrictly: true,
              label: 'title',
              value: '_id',
              emitPath: false
            }" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="路由路径">
            <el-input v-model="addMenuItem.path" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="组件路径">
            <el-input v-model="addMenuItem.component" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="图标:" prop="">
            <el-input v-model="addMenuItem.icon">
              <template #append>
                <el-button :icon="PictureFilled" />
              </template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="排序:" prop="order">
            <el-input v-model="addMenuItem.order" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="状态:" prop="state">
            <!-- 单选框 -->
            <el-radio-group v-model="addMenuItem.show">
              <el-radio :value="true">显示</el-radio>
              <el-radio :value="false">隐藏</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handOk">
          确认
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>

import { ref, reactive, watch, computed } from 'vue'
import type { FormRules } from 'element-plus'
import api from '@/api';
import { ElMessage } from 'element-plus'
import { PictureFilled } from '@element-plus/icons-vue'
import { Creator } from '@/api/modules/authorityMenu';
//弹框标题
const emit = defineEmits(["getAllMemu", "getAllMemuNotPage"])
// 接受父组件数据
const { ruleForm, allUserMan } = defineProps(["ruleForm", "allUserMan"])
const dialogVisible = defineModel();
interface RuleForm {
  name: string,
}
// 添加菜单数据
let addMenuItem = ref<any>({})
// 让弹窗回显
watch(() => ruleForm, () => {
  addMenuItem.value = { ...ruleForm }
})
// 创建者
const creator = ref<Creator>({ creator: "twy" })

// 定义表单的验证规则
const rules = reactive<FormRules<RuleForm>>({
  name: [
    { required: true, message: '请输入商品类型', trigger: 'blur' },
  ],
})
const menuTitle = computed(() => {
  if (ruleForm._id) {
    return "编辑"
  } else {
    return "添加菜单"
  }
})
const handOk = () => {
  if (ruleForm._id) {
    handOkUpdate()
  } else {
    addMenu()
  }
}
// 点击开始更新
const handOkUpdate = async () => {
  const res = await api.authorityMenu.update({
    ...addMenuItem.value,
    ...creator.value,
  })
  if (res.code == 200) {
    ElMessage.success("菜单更新成功")
    // 更新成功刷新页面
    emit("getAllMemu")
    dialogVisible.value = false
  } else {
    ElMessage.error(res.message)
  }
}
// 点击添加菜单
const addMenu = async () => {
  // let pid = addMenuItem.value.pid[addMenuItem.value.pid.length - 1];
  const res = await api.authorityMenu.add({
    ...addMenuItem.value,
    ...creator.value,
  })
  if (res.code == 200) {
    ElMessage.success("菜单添加成功")
    dialogVisible.value = false
    emit("getAllMemu")
    emit("getAllMemuNotPage")
    // emit2("getAllMemuNotPage")
  } else {
    ElMessage.error(res.message)
  }
}
</script>
<style scoped>
.avatar-uploader .avatar {
  width: 80px;
  height: 80px;
  display: block;
}
</style>
<style lang="scss">
.form-hight {
  .el-form-item--default .el-form-item__label {
    height: 47px
  }
}

.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 80px;
  height: 80px;
  text-align: center;
}
</style>